<template>
  <div class="my">
    <heade :title="msg"></heade>
    <div class="user">
      <div class="user_box">
        <h3>
          <img src="https://i.loli.net/2019/03/06/5c7f9615e7bf7.png" alt="">
        </h3>
        <span>185****3266</span>
        <p>完善信息</p>
        <i class="iconfont icon-arrow-right1"></i>
      </div>
    </div>
    <ul class="list">
      <li v-for="(i,index) in list" :key="index">
        <img class="img_left" :src="i.img" alt="">
        <span>{{i.con}}</span>
        <img class="img_right" src="https://i.loli.net/2019/03/06/5c7f9deedeea8.png" alt="">
      </li>
    </ul>
    <div class="tel">
      <div class="pho">
        <img :src="img2" alt="">
        <span>400-666-0246</span>
      </div>
    </div>
  </div>
</template>

<script>
import heade from './heade'
export default {
  data(){
    return{
      msg:'我的',
      list:[
        {img:'https://i.loli.net/2019/03/06/5c7f9a9f3d2a4.png',con:'收藏'},
        {img:'https://i.loli.net/2019/03/06/5c7f9acb5fb61.png',con:'常购清单'},
        {img:'https://i.loli.net/2019/03/06/5c7f9ae2018de.png',con:'收货地址'}
      ],
      img2:"https://i.loli.net/2019/03/06/5c7fa2e6ef6a1.png"
    }
  },
  components:{
    heade
  }
}

</script>
<style scoped lang="scss">
  .my{
    display: flex;
    flex-direction: column;
    .user{
      height: 0.9rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #DD3333;
      .user_box{
        width:3.47rem;
        height: 0.68rem;
        display: flex;
        align-items: center;
        h3{
          width:0.68rem;
          height:0.68rem;
          border-radius: 0.35rem;
          background: #FFFFFF;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width:100%;
            height:100%;
          }
        }
        span{
          font-family: PingFangSC-Regular;
          font-size: 0.16rem;
          color: #FFFFFF;
          letter-spacing: -0.0036rem;
          margin-left:0.12rem;
        }
        p{
          width:0.65rem;
          height:0.22rem;
          border: 1px solid #FFFFFF;
          font-family: PingFangSC-Regular;
          font-size: 0.11rem;
          color: #FFFFFF;
          letter-spacing: 0.0013rem;
          line-height: 0.22rem;
          text-align: center;
          margin-left:0.87rem;
        }
        i{
          width:0.22rem;
          height:0.22rem;
          line-height: 0.22rem;
          text-align: center;
          color:#fff;
        }
      }
    }
    .list{
      height:1.32rem;
      li{
        height:0.44rem;
        display: flex;
        align-items: center;
        position: relative;
        &::after{
          content:"";
          width:100%;
          height:0.01rem;
          position: absolute;
          left:0;
          bottom:0;
          background: #F2F1F6;
          transform: scale(1,0.5);
        }
        .img_left{
          margin-left:0.14rem;
          width:0.16rem;
          height:0.16rem;
        }
        span{
          margin-left:0.1rem;
          font-family: PingFangSC-Regular;
          font-size: 0.15rem;
          color: #333333;
          letter-spacing: -0.0034rem;
          line-height: 0.15rem;
        }
        .img_right{
          width:0.06rem;
          height:0.12rem;
          position: absolute;
          right:0.14rem;
        }
      }
    }
    .tel{
      position: absolute;
      width: 100%;
      top: 2.67rem;
      bottom:0.49rem;
      overflow: hidden;
      background: #f2f1f6;
      .pho{
        margin-top:0.10rem;
        height:0.44rem;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          width:0,18rem;
          height:0.18rem;
        }
        span{
          font-family: PingFangSC-Regular;
          font-size: 0.18rem;
          color: #333333;
          letter-spacing: -0.0041rem;
          line-height: 0.44rem;
          padding-left:0.1rem;
        }
      }
    }
  }
</style>